<template>
  <div v-show="isShow" class="tpiModal-container">
    <div class="modal-header">
      <div class="title">检测点</div>
      <div class="closeicon" @click="closed"><CloseOutlined /></div>
      <div class="listBtn" @click="showListEvent">
        列表
        <a-image
          v-if="!showList"
          :width="16"
          :height="16"
          :src="rightList"
          :preview="false"
        />
        <a-image
          v-else
          :width="16"
          :height="16"
          :src="leftList"
          :preview="false"
        />
      </div>
    </div>
    <div class="modal-content">
      <a-form
        :model="tpiObj"
        :labelCol="{ style: 'width: 60px' }"
        labelAlign="left"
      >
        <a-form-item label="名称" :colon="false">
          <a-input
            v-model:value="tpiObj.name"
            class="input_228"
            :disabled="dealType == 1"
          />
        </a-form-item>
        <a-form-item label="P坐标" :colon="false">
          <a-input
            v-model:value="tpiObj.positionX"
            class="input_228"
            :disabled="dealType == 1"
          />
        </a-form-item>
        <a-form-item label="H坐标" :colon="false">
          <a-input
            v-model:value="tpiObj.positionY"
            class="input_228"
            :disabled="dealType == 1"
          />
        </a-form-item>
      </a-form>
      <div v-if="dealType == 0 && !passflag">
        <a-button
          class="saveCheckCls"
          style="    margin-top: 0px;
    margin-bottom: 36px;"
          @click="saveTpiPoint"
        >
          保存
        </a-button>
      </div>
      <div class="title" style="    margin-bottom: 16px;">检测信息</div>
      <a-form
        :model="tpiObj"
        :labelCol="{ style: 'width: 60px' }"
        labelAlign="left"
      >
        <a-form-item label="检测类型" :colon="false">
          <div
            v-for="(item, index) in tpiObj.typeArr"
            :key="index"
            :style="{ 'margin-top': index === 0 ? '0px' : '12px' }"
          >
            <a-select
              v-model:value="item.type"
              style="width:144px"
              :disabled="dealType == 1"
            >
              <a-select-option
                v-for="itemsec in typesections"
                :key="itemsec.key"
                :value="itemsec.key"
                :title="itemsec.value"
              >
                {{ itemsec.value }}
              </a-select-option>
            </a-select>
            <a-input
              v-model:value="item.value"
              placeholder="检测值"
              style="width:50px;margin-left:8px"
              :disabled="dealType == 1"
            />

            <a-image
              v-if="item.last && dealType == 0"
              :width="18"
              :height="18"
              :src="addType"
              :preview="false"
              style="margin-left:8px"
              @click="addTypeCol"
            />
            <a-image
              v-if="!item.last && dealType == 0"
              :width="18"
              :height="18"
              :src="delType"
              :preview="false"
              style="margin-left:8px"
              @click="delTypeCol(index)"
            />
          </div>
        </a-form-item>
        <a-form-item label="现场照片" :colon="false" style="margin:0px">
          <a-upload
            list-type="picture-card"
            v-model:file-list="tpiObj.imgfileList"
            style="width:68px;height:68px"
            :disabled="dealType == 1 || passflag"
            :action="uploadImgFile"
            :remove="deleteImgFile"
          >
            <div v-if="tpiObj.imgfileList.length < 6">
              <div class="imgBack">
                <div class="imgUpload"></div>
              </div>
            </div>
          </a-upload>
        </a-form-item>
        <a-form-item label="检测报告" :colon="false" class="reportItemCls">
          <!-- <a-upload
            v-model:file-list="tpiObj.reportfileList"
            class="reportUploadDiv"
          >
            <a-button class="uploadFileBtn" style="    float: right;">
              上传
            </a-button>
          </a-upload> -->
          <div
            class="fileShowCls"
            style=""
            v-for="(item, index) in tpiObj.reportfileList"
            :key="index"
          >
            <a-image
              :width="22"
              :height="22"
              :src="fileImg"
              :preview="false"
              style="    margin-left: 4px;"
            />
            <div class="filenamecls" @click="showFile(item.url)">
              {{ item.fileName }}
            </div>
            <div
              class="delfilenamecls"
              v-if="dealType == 0 && !passflag"
              @click="delExitUpload(item.id)"
            >
              删除
            </div>
          </div>
          <!-- <div
            class="fileShowCls"
            style=""
            v-for="(item, index) in fileArr"
            :key="index"
          >
            <a-image
              :width="22"
              :height="22"
              :src="fileImg"
              :preview="false"
              style="    margin-left: 4px;"
            />
            <div class="filenamecls" :title="item.name">{{ item.name }}</div>
            <div class="delfilenamecls" @click="delNowUpload(index)">删除</div>
          </div> -->
          <div
            style="    display: contents;
    float: right;"
          >
            <input
              type="file"
              ref="fileRef"
              style="opacity: 0;
    filter: alpha(opacity=0);
    width: 80px;
    height: 40px;
    overflow: hidden;display: inline-block;
  
    position: absolute;
    left: 0px;"
              @change="fileChange"
              v-if="dealType == 0"
            />
            <a-button
              class="uploadFileBtn"
              style=""
              v-if="dealType == 0 && !passflag"
            >
              上传
            </a-button>
          </div>
        </a-form-item>
        <a-form-item label="备注" :colon="false">
          <a-textarea
            v-model:value="tpiObj.remark"
            :auto-size="{ minRows: 1, maxRows: 5 }"
            class="input_228"
            :disabled="dealType == 1"
          />
        </a-form-item>
        <a-form-item label="检测时间" :colon="false">
          <a-date-picker
            show-time
            v-model:value="tpiObj.detectionTime"
            placeholder="检测时间"
            class="input_228"
            :disabled="dealType == 1"
          />
        </a-form-item>
        <a-form-item label="检测人" :colon="false">
          <div
            style="height: 32px;
    line-height: 32px;"
          >
            {{ tpiObj.inspector }}
          </div>
        </a-form-item>
      </a-form>
      <div v-if="dealType == 0 && !passflag">
        <a-button class="passBtn checkBtn" @click="passTpiPoint">
          合格
        </a-button>
        <a-button class="unpassBtn checkBtn" @click="nopassTpiPoint">
          不合格
        </a-button>
      </div>
      <div v-if="dealType == 0 && !passflag">
        <a-button class="saveCheckCls" @click="saveTpiInfo(-1)">
          保存
        </a-button>
      </div>
    </div>

    <div class="modal-right" v-if="showList">
      <div class="modal-right-header">
        <div class="title">检测点列表</div>
      </div>
      <div class="modal-right-content">
        <a-table
          :data-source="tpiArr"
          :pagination="false"
          :rowKey="record => record.id"
          :scroll="{ y: 570 }"
        >
          <a-table-column title="删除" data-index="id" width="50px">
            <template #default="{text,record}">
              <a-image
                @click="deleteTpiPoint(record)"
                :width="18"
                :height="18"
                :src="deleteImg"
                :preview="false"
              />
            </template>
          </a-table-column>
          <a-table-column title="名称" data-index="name">
            <!-- <template #default="{text,record}">
              <span :title="record.name" v-if="record.name.length > 14">{{
                record.name.substring(0, 14) + '...'
              }}</span>

              <span v-else-if="record.name.length <= 14">{{ record.name }}</span>
            </template> -->
            <template #default="{text,record}">
              <span>{{ record.name }}</span>
            </template>
          </a-table-column>
          <a-table-column title="P坐标" data-index="positionX" width="110px">
          </a-table-column>
          <a-table-column title="H坐标" data-index="positionY" width="110px">
          </a-table-column>
          <a-table-column title="检测状态" data-index="statue" width="80px">
            <template #default="{text,record}">
              <div v-if="record.statue === '1'" class="tdstatueCls statueCls1">
                待检测
              </div>
              <div
                v-else-if="record.statue === '2'"
                class="tdstatueCls statueCls2"
              >
                检测中
              </div>
              <div
                v-else-if="record.statue === '3'"
                class="tdstatueCls statueCls3"
              >
                整改中
              </div>
              <div v-else class="tdstatueCls statueCls4">检测完成</div>
            </template>
          </a-table-column>
          <!-- <a-table-column
            title="检测时间"
            data-index="checktime"
          ></a-table-column>
          <a-table-column title="检测人" data-index="checkuser" width="80px">
            <template #default="{text,record}">
              <span
                :title="record.checkuser"
                v-if="record.checkuser.length > 6"
                >{{ record.checkuser.substring(0, 6) + '...' }}</span
              >

              <span v-else-if="record.checkuser.length <= 6">{{
                record.checkuser
              }}</span>
            </template>
          </a-table-column> -->
          <a-table-column title="修改" data-index="id" width="50px">
            <template #default="{text,record}">
              <a-image
                v-if="record.statue === '4'"
                :width="18"
                :height="18"
                :src="editImggray"
                :preview="false"
              />
              <a-image
                v-else
                @click="editTpiPoint(record)"
                :width="18"
                :height="18"
                :src="editImg"
                :preview="false"
              />
            </template>
          </a-table-column>
          <a-table-column title="详情" data-index="id" width="50px">
            <template #default="{text,record}">
              <a-image
                @click="detailTpiPoint(record)"
                :width="18"
                :height="18"
                :src="detailImg"
                :preview="false"
              />
            </template>
          </a-table-column>
        </a-table>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { useStore } from 'vuex'
import { defineComponent, ref } from 'vue'
import { message, Modal } from 'ant-design-vue'
import axios from 'axios'
import moment, { Moment } from 'moment'
import { CloseOutlined } from '@ant-design/icons-vue'
import leftList from '@/assets/image/leftList.png'
import rightList from '@/assets/image/rightList.png'
import addType from '@/assets/image/addType.png'
import delType from '@/assets/image/delType.png'
import fileImg from '@/assets/image/fileImg.png'
import editImg from '@/assets/image/editImg.png'
import editImggray from '@/assets/image/editImggray.png'
import deleteImg from '@/assets/image/deleteImg.png'
import detailImg from '@/assets/image/detailImg.png'
import config from '@/config/index'
export default defineComponent({
  props: {
    isShow: {
      type: Boolean,
      default: false
    }
  },
  setup(props, context) {
    const store = useStore()
    const fileArr = ref(new Array<any>())
    const tpiArr = ref(new Array<any>())
    const showList = ref<boolean>(false)
    const listImg = ref<any>()
    const typesections = ref(new Array<any>())

    const fileRef = ref()
    const cellId = ref<number>()
    const dealType = ref<number>(0) // 0可编辑1详情
    const passflag = ref<boolean>(false) // true 合格

    const selPointId = ref<number>(-1)
    // const host = ref<string>('https://zhihuigongdi.cn/haerbin/Api')
    const statusObj = ref<any>({
      待检测: '1',
      检测中: '2',
      整改中: '3',
      检测完成: '4'
    })
    const tpiObj = ref<any>({
      id: -1,
      name: '',
      positionX: '',
      positionY: '',
      typeArr: [
        {
          type: '',
          value: '',
          last: true
        }
      ],
      imgfileList: new Array<any>(),
      reportfileList: new Array<any>(),
      remark: '',
      detectionTime: null,
      inspector: ''
    })
    const cleanTpiObj = () => {
      tpiObj.value.id = -1
      selPointId.value = -1
      tpiObj.value.name = ''
      tpiObj.value.positionX = ''
      tpiObj.value.positionY = ''
      tpiObj.value.typeArr = []
      tpiObj.value.imgfileList = []
      tpiObj.value.reportfileList = []
      tpiObj.value.remark = ''
      tpiObj.value.detectionTime = moment(
        moment(new Date()).format('yyyy-MM-DD HH:mm:ss')
      )
      const userinfo = store.getters['userinfo/getUserInfo']
      tpiObj.value.inspector = userinfo.username
      fileRef.value = ''
      fileArr.value = []
      tpiObj.value.typeArr.push({
        type: '',
        value: '',
        last: true
      })
    }
    const closed = () => {
      context.emit('closed')
      cleanTpiObj()
    }
    const addTypeCol = () => {
      const len = tpiObj.value.typeArr.length
      for (let i = 0; i < len; i++) {
        tpiObj.value.typeArr[i].last = false
      }
      debugger
      tpiObj.value.typeArr.push({
        type: '',
        value: '',
        last: true
      })
      // for (let i = 0; i < tpiObj.value.typeArr.length; i++) {
      //   console.log(tpiObj.value.typeArr[i])
      //   console.log(tpiObj.value.typeArr[i].type)
      // }
    }
    const delTypeCol = (index: number) => {
      tpiObj.value.typeArr.splice(index, 1)
      const len = tpiObj.value.typeArr.length
      if (len > 0) {
        for (let i = 0; i < len - 1; i++) {
          tpiObj.value.typeArr[i].last = false
        }
        tpiObj.value.typeArr[len - 1].last = true
      }
    }
    // const beforeUploadReport = (file: any) => {
    //   tpiObj.value.reportfileList = [...tpiObj.value.reportfileList, file]
    //   return false
    // }
    const getFile = (fileType: any) => {
      const userinfo = store.getters['userinfo/getUserInfo']
      if (userinfo) {
        const url =
          config.cityUrlPath +
          '/detection/attachments/' +
          selPointId.value +
          '/' +
          fileType +
          '/'

        axios.get(url).then((res: any) => {
          if (res.success) {
            if (fileType == '现场照片') {
              tpiObj.value.imgfileList = []
              for (let i = 0; i < res.data.length; i++) {
                tpiObj.value.imgfileList.push({
                  url: res.data[i].fileUrl,
                  id: res.data[i].id,
                  pointId: res.data[i].detectionPointId,
                  fileName: res.data[i].fileName,
                  createTime: res.data[i].createTime
                })
              }
            } else {
              tpiObj.value.reportfileList = []
              for (let i = 0; i < res.data.length; i++) {
                tpiObj.value.reportfileList.push({
                  url: res.data[i].fileUrl,
                  id: res.data[i].id,
                  pointId: res.data[i].detectionPointId,
                  fileName: res.data[i].fileName,
                  createTime: res.data[i].createTime
                })
              }
            }
          }
        })
      }
    }
    const deleteImgFile = (e: any) => {
      //   Modal.confirm({
      //   title: `是否确认删除该现场照片?`,
      //   okText: '确定',
      //   okType: 'danger',
      //   cancelText: '取消',
      //   onOk() {
      //     const userinfo = store.getters['userinfo/getUserInfo']
      //     if (userinfo) {
      //       const url =
      //         config.cityUrlPath +
      //         '/detection/points/' +
      //         selPointId.value +
      //         '/attachments/' +
      //         e.id
      //       axios.delete(url).then((res: any) => {
      //         if (res.success) {
      //           message.info('删除成功')
      //           getFile('现场照片')
      //         } else {
      //           message.info('删除失败')
      //         }
      //       })
      //     }
      //   }
      // })
      const userinfo = store.getters['userinfo/getUserInfo']
      if (userinfo) {
        const url =
          config.cityUrlPath +
          '/detection/points/' +
          selPointId.value +
          '/attachments/' +
          e.id
        axios.delete(url).then((res: any) => {
          if (res.success) {
            message.info('删除成功')
            getFile('现场照片')
          } else {
            message.info('删除失败')
          }
        })
      }
    }
    const delExitUpload = (id: number) => {
      Modal.confirm({
        title: `是否确认删除该检测报告?`,
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          const userinfo = store.getters['userinfo/getUserInfo']
          if (userinfo) {
            const url =
              config.cityUrlPath +
              '/detection/points/' +
              selPointId.value +
              '/attachments/' +
              id
            axios.delete(url).then((res: any) => {
              if (res.success) {
                message.info('删除成功')
                getFile('检测报告')
              } else {
                message.info('删除失败')
              }
            })
          }
        }
      })
    }
    const delNowUpload = (index: number) => {
      fileArr.value.splice(index, 1)
    }
    const getTpiList = () => {
      const userinfo = store.getters['userinfo/getUserInfo']
      tpiArr.value = []
      if (userinfo) {
        const url = config.cityUrlPath + '/detection/work-unit/' + cellId.value
        axios.get(url).then((res: any) => {
          if (res.success) {
            const arr = res.data

            for (let i = 0; i < arr.length; i++) {
              tpiArr.value.push({
                id: arr[i].id,
                name: arr[i].name,
                positionX: arr[i].positionX.toFixed(2),
                positionY: arr[i].positionY.toFixed(2),
                statueText: arr[i].status,
                statue: statusObj.value[arr[i].status]
              })
            }
          } else {
            message.info(res.errorMsg)
          }
        })
      }
    }
    const showListEvent = () => {
      dealType.value = 0

      if (showList.value) {
        showList.value = false
      } else {
        showList.value = true
        getTpiList()
      }
    }
    const getTypeSysDic = () => {
      const userinfo = store.getters['userinfo/getUserInfo']
      typesections.value = []
      if (userinfo) {
        const url = config.cityUrlPath + '/detection/system-dic/compaction/'
        axios.get(url).then((res: any) => {
          if (res.success) {
            typesections.value = res.data
          }
        })
      }
    }
    const setCellId = (selcellId: number) => {
      cellId.value = selcellId
      showList.value = false
      getTypeSysDic()
      dealType.value = 0
      tpiObj.value.detectionTime = moment(
        moment(new Date()).format('yyyy-MM-DD HH:mm:ss')
      )
      tpiObj.value.typeArr = [
        {
          type: '',
          value: '',
          last: true
        }
      ]
      const userinfo = store.getters['userinfo/getUserInfo']
      tpiObj.value.inspector = userinfo.username
      passflag.value = false
    }
    const setSelAB = (A: number, B: number) => {
      cleanTpiObj()
      dealType.value = 0
      tpiObj.value.positionX = A.toString()
      tpiObj.value.positionY = B.toString()
      tpiObj.value.name =
        'P' + tpiObj.value.positionX + '/' + 'H' + tpiObj.value.positionY
    }
    const setPointStatue = (flag: string) => {
      //flag 0不合格1合格
      const userinfo = store.getters['userinfo/getUserInfo']
      if (userinfo) {
        const url =
          config.cityUrlPath + '/detection/points/' + selPointId.value + '/passed'
        axios
          .put(url, flag, {
            headers: {
              'content-type': 'text/plain'
            }
          })
          .then((res: any) => {
            if (res.success) {
              message.info('提交成功')
              if (showList.value) {
                getTpiList()
              }
            } else {
              message.info('提交失败')
            }
          })
      }
    }

    const saveTpiPoint = () => {
      if (tpiObj.value.name == '') {
        message.info('请输入检测点名称')
        return
      }
      if (tpiObj.value.positionX == '' || tpiObj.value.positionY == '') {
        message.info('请输入检测点坐标')
        return
      }

      const userinfo = store.getters['userinfo/getUserInfo']
      if (userinfo) {
        const url = config.cityUrlPath + '/detection/points/'
        if (selPointId.value == -1) {
          //新增
          axios
            .post(url, {
              name: tpiObj.value.name,
              positionX: tpiObj.value.positionX,
              positionY: tpiObj.value.positionY,
              workUnitId: cellId.value,
              creator: userinfo.username
            })
            .then((res: any) => {
              if (res.success) {
                message.info('保存成功')
                cleanTpiObj()
                if (showList.value) {
                  getTpiList()
                }
              } else {
                message.info('保存失败')
              }
            })
        } else {
          //编辑
          axios
            .put(url, {
              id: selPointId.value,
              name: tpiObj.value.name,
              positionX: tpiObj.value.positionX,
              positionY: tpiObj.value.positionY,
              workUnitId: cellId.value
            })
            .then((res: any) => {
              if (res.success) {
                message.info('保存成功')
                if (showList.value) {
                  getTpiList()
                }
              } else {
                message.info('保存失败')
              }
            })
        }
      }
    }
    const saveTpiInfo = (flag: number) => {
      if (selPointId.value == -1) {
        message.info('请先选择检测点')
        return
      }
      const dateStr: any = ref({})
      const temparr = tpiObj.value.typeArr
      dateStr.value.items = []
      for (let i = 0; i < temparr.length; i++) {
        if (temparr[i].value != '') {
          dateStr.value.items.push({
            item: temparr[i].type,
            value: temparr[i].value
          })
        }
      }
      if (dateStr.value.items.length <= 0) {
        message.info('请选择输入检测值')
        return
      }
      if (
        tpiObj.value.detectionTime == '' ||
        tpiObj.value.detectionTime == null
      ) {
        message.info('请输入检测时间')
        return
      }
      const userinfo = store.getters['userinfo/getUserInfo']
      if (userinfo) {
        dateStr.value.pointId = selPointId.value
        dateStr.value.remark = tpiObj.value.remark
        dateStr.value.inspector = userinfo.username
        dateStr.value.detectionTime = moment(tpiObj.value.detectionTime).format(
          'yyyy-MM-DD HH:mm:ss'
        )
        debugger
        const url = config.cityUrlPath + '/detection/values/'
        axios.post(url, dateStr.value).then((res: any) => {
          if (res.success) {
            if (flag == -1) {
              message.info('保存成功')
              if (showList.value) {
                getTpiList()
              }
            } else {
              if (flag == 0) {
                setPointStatue('0')
              } else {
                if (flag == 1) {
                  setPointStatue('1')
                  passflag.value = true
                }
              }
            }
          } else {
            message.info('保存失败')
          }
        })
      }
    }
    const passTpiPoint = () => {
      Modal.confirm({
        title: `提交后该结果不可更改，是否确认提交?`,
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          saveTpiInfo(1)
        }
      })

      // setPointStatue(1)
    }
    const nopassTpiPoint = () => {
      saveTpiInfo(0)
    }
    const deleteTpiPoint = (data: any) => {
      dealType.value = 0
      Modal.confirm({
        title: `是否确认删除该检测点?`,
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          const userinfo = store.getters['userinfo/getUserInfo']
          if (userinfo) {
            const url = config.cityUrlPath + '/detection/points/' + data.id
            axios.delete(url).then((res: any) => {
              if (res.success) {
                message.info('删除成功')
                getTpiList()
                cleanTpiObj()
              } else {
                message.info('删除失败')
              }
            })
          }
        }
      })
    }
    const getPointDetail = (index: number) => {
      //index 0编辑1详情
      const userinfo = store.getters['userinfo/getUserInfo']
      if (userinfo) {
        const url = config.cityUrlPath + '/detection/points/' + selPointId.value
        tpiObj.value.typeArr = []
        tpiObj.value.imgfileList = []
        tpiObj.value.reportfileList = []
        axios.get(url).then((res: any) => {
          if (res.success) {
            const arr = res.data
            if (arr.length > 0) {
              tpiObj.value.id = arr[0].id
              tpiObj.value.name = arr[0].name
              tpiObj.value.positionX = arr[0].positionX
              tpiObj.value.positionY = arr[0].positionY
              debugger
              if (arr[0].inspector == null) {
                tpiObj.value.inspector = userinfo.username
              } else {
                tpiObj.value.inspector = arr[0].inspector
              }

              tpiObj.value.remark = arr[0].remark
              if (arr[0].detectionTime == null) {
                tpiObj.value.detectionTime = moment(
                  moment(new Date()).format('yyyy-MM-DD HH:mm:ss')
                )
              } else {
                // tpiObj.value.detectionTime = moment(
                //   moment(arr[0].detectionTime.toDate()).format(
                //     'yyyy-MM-DD HH:mm:ss'
                //   )
                // )
                tpiObj.value.detectionTime = moment(arr[0].detectionTime)
              }

              const values = arr[0].values
              let len = values.length

              for (let j = 0; j < len; j++) {
                if (j == len - 1) {
                  tpiObj.value.typeArr.push({
                    type: values[j].item,
                    value: values[j].value,
                    last: true
                  })
                } else {
                  tpiObj.value.typeArr.push({
                    type: values[j].item,
                    value: values[j].value,
                    last: false
                  })
                }
              }
              if (index == 0) {
                if (len == 0) {
                  tpiObj.value.typeArr.push({
                    type: '',
                    value: '',
                    last: true
                  })
                }
              }

              // tpiObj.value.inspector = arr[0].inspector
              const attachments = arr[0].attachments
              for (let k = 0; k < attachments.length; k++) {
                if (attachments[k].category == '现场照片') {
                  tpiObj.value.imgfileList.push({
                    url: attachments[k].fileUrl,
                    id: attachments[k].id,
                    pointId: attachments[k].detectionPointId,
                    fileName: attachments[k].fileName,
                    createTime: attachments[k].createTime
                  })
                } else {
                  tpiObj.value.reportfileList.push({
                    url: attachments[k].fileUrl,
                    id: attachments[k].id,
                    pointId: attachments[k].detectionPointId,
                    fileName: attachments[k].fileName,
                    createTime: attachments[k].createTime
                  })
                }
              }
            } else {
              cleanTpiObj()
            }
          } else {
            message.info(res.errorMsg)
          }
        })
      }
    }
    const editTpiPoint = (data: any) => {
      dealType.value = 0
      selPointId.value = data.id
      passflag.value = false
      getPointDetail(0)
    }
    const detailTpiPoint = (data: any) => {
      dealType.value = 1
      selPointId.value = data.id
      getPointDetail(1)
    }

    const uploadImgFile = (e: any) => {
      debugger
      // const formData = new FormData()

      const formData: any = new FormData()
      formData.append('file', e)
      const userinfo = store.getters['userinfo/getUserInfo']
      if (userinfo) {
        const url =
          config.cityUrlPath +
          '/detection/attachments/' +
          selPointId.value +
          '/现场照片/'
        axios
          .post(url, formData, {
            headers: {
              'content-type': 'multipart/form-data'
            }
          })
          .then((res: any) => {
            if (res.success) {
              getFile('现场照片')
            } else {
              message.info('上传失败')
            }
          })
      }
    }
    const uploadrePortFile = (file: any) => {
      const formData = new FormData()
      formData.append('file', file)
      const userinfo = store.getters['userinfo/getUserInfo']
      if (userinfo) {
        const url =
          config.cityUrlPath +
          '/detection/attachments/' +
          selPointId.value +
          '/检测报告/'
        axios
          .post(url, formData, {
            headers: {
              'content-type': 'application/x-www-form-urlencoded'
            }
          })
          .then((res: any) => {
            if (res.success) {
              getFile('检测报告')
            } else {
              message.info('上传失败')
            }
          })
      }
    }
    const fileChange = (e: any) => {
      console.log(e.target.files)
      let tempfileArr = e.target.files[0]
      fileArr.value.push(tempfileArr)
      uploadrePortFile(tempfileArr)
    }
    const showFile = (url: string) => {
      window.open(url, '_blank')
    }

    return {
      closed,
      tpiObj,
      leftList,
      rightList,
      addType,
      delType,
      addTypeCol,
      delTypeCol,
      fileImg,
      fileChange,
      fileArr,
      tpiArr,
      delExitUpload,
      delNowUpload,
      editImg,
      deleteImg,
      showListEvent,
      showList,
      listImg,
      getTypeSysDic,
      setCellId,
      cellId,
      setSelAB,
      fileRef,
      passTpiPoint,
      nopassTpiPoint,
      saveTpiPoint,
      deleteTpiPoint,
      editTpiPoint,
      detailImg,
      detailTpiPoint,
      dealType,
      // host,
      typesections,
      saveTpiInfo,
      selPointId,
      statusObj,
      cleanTpiObj,

      uploadImgFile,
      uploadrePortFile,
      getPointDetail,
      setPointStatue,
      getFile,
      deleteImgFile,
      showFile,
      getTpiList,
      passflag,
      editImggray
    }
  },
  components: {
    CloseOutlined
  }
})
</script>

<style lang="scss" scoped>
.tpiModal-container {
  z-index: 1000;
  width: 331px;
  height: 720px;
  background: #ffffff;
  position: absolute;
  top: 0px;
  box-shadow: 0px 2px 16px 0px rgba(6, 80, 185, 0.1);
  border-radius: 2px;
  margin-top: 16px;

  font-family: PingFangSC-Semibold, PingFang SC;
  .title {
    font-size: 18px;
    display: inline-block;
    font-weight: 600;
    color: #333333;
  }
  .modal-header {
    .title {
      margin-left: 24px;
      margin-top: 20px;
    }
    .listBtn {
      width: 80px;
      height: 32px;
      background: #e6f1fc;
      display: inline-block;
      border: 1px solid #1677ff;
      font-size: 14px;
      line-height: 32px;
      font-weight: 400;
      color: #1677ff;
      border-radius: 2px;
      text-align: center;
      float: right;
      margin-top: 20px;
      margin-right: 16px;
      cursor: pointer;
    }
    .closeicon {
      display: inline-block;
      float: right;
      font-size: 18px;
      margin-top: 20px;
      margin-right: 16px;
    }
  }

  .modal-content {
    margin-top: 20px;
    position: relative;
    left: 24px;
    height: 652px;
    overflow-y: auto;
    width: 307px;
    .imgBack {
      background: url('../../assets/image/imgBack.png') center no-repeat;
      width: 50px;
      height: 50px;
      .imgUpload {
        background: url('../../assets/image/imgUpload.png') no-repeat center;
        height: 58px;
        width: 58px;
        /* margin: 0 auto; */
        /* margin-right: 5px; */
        position: relative;
        right: 5px;
        bottom: 5px;
      }
    }
    .reportItemCls {
      ::v-deep .ant-form-item-control {
        width: 144px;
      }
    }
    .ant-form-item {
      margin-bottom: 12px;
      .input_228 {
        width: 228px;
      }
      ::v-deep .ant-form-item-label-left {
        line-height: 32px;
      }
      ::v-deep .ant-form-item-control {
        line-height: 0px;
      }
      ::v-deep .ant-upload-picture-card-wrapper {
        width: 228px;
      }
      ::v-deep .ant-upload-list-picture-card-container {
        width: 68px;
        height: 68px;
      }
      ::v-deep .ant-upload-list-picture-card .ant-upload-list-item {
        width: 68px;
        height: 68px;
        margin: 0px;
        margin-right: 12px;
      }
      ::v-deep .ant-upload-list-picture .ant-upload-list-item,
      ::v-deep .ant-upload-list-picture-card .ant-upload-list-item {
        padding: 0px;
      }
      ::v-deep .ant-upload-list-item {
        margin-top: 0px;
      }
      ::v-deep .ant-upload.ant-upload-select-picture-card {
        width: 68px;
        height: 68px;
        background: #e6f1fc;
        border-radius: 2px;
        border: 1px solid #1677ff;
      }
      .fileShowCls {
        width: 144px;
        height: 40px;
        background: #e6f1fc;
        display: inline-block;
        opacity: 0.66;
        float: left;
        margin-right: 8px;
        margin-bottom: 4px;
        ::v-deep .ant-image {
          position: relative;
          top: -9px;
        }
        .filenamecls {
          width: 78px;

          font-size: 12px;

          font-weight: 400;
          color: #666666;

          margin-left: 8px;
          margin-right: 8px;
          display: inline-block;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          height: 24px;
          line-height: 24px;
          margin-top: 8px;
          cursor: pointer;
        }
        .delfilenamecls {
          font-size: 12px;
          font-weight: 400;
          color: #1677ff;
          line-height: 17px;
          width: 24px;
          display: inline-block;
          cursor: pointer;
          position: relative;
          top: -8px;
        }
      }
      .uploadFileBtn {
        width: 80px;
        // height: 32px;
        background: #e6f1fc;
        border: 1px solid #1677ff;
        font-size: 14px;
        font-weight: 400;
        color: #1677ff;
        border-radius: 2px;
        height: 40px;
        position: absolute;
        left: 0px;
        display: inline-block;
        z-index: -1;
      }
      .reportUploadDiv {
        ::v-deep .ant-upload-list-item {
          width: 228px;
        }
      }
    }
    .checkBtn {
      width: 139px;
      height: 32px;
      border-radius: 2px;
      font-size: 14px;
      cursor: pointer;
      font-weight: 400;
    }
    .passBtn {
      background: rgba(25, 161, 96, 0.19);
      border: 1px solid #19a160;
      margin-right: 12px;
      color: #19a160;
    }
    .unpassBtn {
      background: rgba(209, 70, 47, 0.19);
      border: 1px solid #d1462f;
      color: #d1462f;
    }
    .saveCheckCls {
      width: 65px;
      height: 32px;
      background: #1677ff;
      font-size: 14px;

      font-weight: 400;
      color: #ffffff;
      margin-top: 30px;
      margin-bottom: 12px;
    }
  }
  .modal-right {
    width: 742px;
    height: 720px;
    background: #ffffff;
    position: absolute;
    top: 0px;
    left: 331px;
    box-shadow: 0px 2px 16px 0px rgba(6, 80, 185, 0.1);
    border-radius: 2px;
    .modal-right-header {
      .title {
        font-size: 18px;

        font-weight: 600;
        color: #333333;
        margin-left: 14px;
        margin-top: 20px;
      }
    }
    .modal-right-content {
      width: 704px;
      margin-left: 14px;
      margin-top: 27px;
      ::v-deep .ant-table-thead > tr > th {
        padding: 10px 0px !important;
      }
      ::v-deep .ant-table-tbody > tr > td {
        padding: 18px 0px !important;
      }
      .tdstatueCls {
        width: 60px;
        height: 22px;
        border-radius: 2px;
        line-height: 22px;
        font-size: 12px;
        font-weight: 400;
        margin-left: 10px;
      }
      .statueCls1 {
        border: 1px solid #ff9c01;
        color: #ff9c01;
      }
      .statueCls2 {
        border: 1px solid #1677ff;
        color: #1677ff;
      }
      .statueCls3 {
        border: 1px solid #d1462f;
        color: #d1462f;
      }
      .statueCls4 {
        border: 1px solid #19a160;
        color: #19a160;
      }
    }
  }
  // ::-webkit-scrollbar {
  //   width: 0px;
  //   height: 10px;
  // }
}
</style>
